<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" placeholder="请输入密码" @focus="clearPlaceholder" @blur="resetPlaceholder">
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                placeholderText: '请输入密码'
            };
        },
        methods: {
            clearPlaceholder(event) {
                // 清除 placeholder，当输入框获得焦点时
                event.target.placeholder = '';
            },
            resetPlaceholder(event) {
                // 重置 placeholder，当输入框失去焦点时
                if (event.target.value === '') {
                    event.target.placeholder = this.placeholderText;
                }
            }
        }
    });
    app.mount('#app');
</script>
</body>



